<template>
    <div>
        <!-- 变更检查频率:fzBgjcpl-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm'&&isReset==1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox">
            <el-button :disabled="type == 'useForm' && !disabled&&!isAudit ? false : true" @click="open"
                type="primary">变更贷款后检查频率</el-button>
            <mytable :fields="fields" width="150" ref="tableRef" :defaultList="model.data.data" class="m_t_16"
                :isSelection="false" :isPaginationShow="false">
                <template v-slot:after="{ row }">
                    <span>{{ row.after == 1 ? '月' : row.after == 2 ? '季' : '年' }}</span>
                </template>
                <template v-slot:before="{row}">
                    <span>{{ row.before == 1 ? '月' : row.before == 2 ? '季' : '年' }}</span>
                </template>
                <template v-slot:operation="{ row, $index }">
                    <div class="d_f j_c_s_b">
                        <span class="error" @click="deleteOut($index)" v-if="row.isOwn&&!isAudit&&row.status!=1">删除</span>
                    </div>
                </template>
            </mytable>
            <div class="segment" v-if="fields2.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields2.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div class="acceptance_form" v-if="fields2.length > 0">
                <myform :fields="fields2" :model="model.data" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="变更贷后检查频率" width="500" :before-close="handleClose">
            <div class="fzBgjcpl_form">
                <myform :fields="fields1" ref="form1" :inline="false" labelPosition="top" :rules="rules"
                    :options="options" :model="values" class="m_t_16">
                </myform>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="query">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { fzBgjcplType } from './data'
import { CloseBold } from '@element-plus/icons-vue'
import { copy,momentNewDate} from '../../utils/date'
import { formGet, unitFormSet,} from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { inspectPlanList } from '../../api/agent'
const model = {
    changeFrequency: {},
    data:{
        data: [],
    }, 
}
const values = {
    after: null,
    remark: '',
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}
        },
        projectId: {
            type: [String, Number],
            default: '',
        },
        isAudit: {
            type: Boolean,
            default: true
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: fzBgjcplType = reactive({
            model: copy(model),
            values: copy(values),
            status: true,
            id: '',
            name: '变更检查频率',
            subTitle: '',
            options: {
                after: [
                    {
                        name: '月',
                        id: 1
                    },
                    {
                        name: '季',
                        id: 2
                    },
                    {
                        name: '年',
                        id: 3
                    },
                ],
            },
            rules: {
                after: [
                    { required: true, message: '请选择定期检查频率', trigger: 'change' },
                ],
            },
            fields: [
                {
                    label: '变更前贷后检查频率',
                    prop: 'before',
                },
                {
                    label: '变更后贷后检查频率',
                    prop: 'after',
                },
                {
                    label: '变更人',
                    prop: 'uploadName',
                },
                {
                    label: '变更日期',
                    prop: 'uploadTime',
                },
                {
                    label: '备注',
                    prop: 'remark',
                },
            ],
            fields1: [
                {
                    label: "定期检查频率",
                    prop: 'after',
                    placeholder: '请选择',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                },
                {
                    label: "备注",
                    prop: 'remark',
                    placeholder: '请输入备注',
                    type: 'textarea',
                },
            ],
            fields2: [],
            dialogVisible: false,
            disabled: false,
            isReset:2,
            obj:{
                before:0,
                period:0
            },
        })
        const router = useRouter()
        const form1 = ref()
        onBeforeMount(() => {
            methods.getData()
            console.log(props,'props');
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            open() {
                data.dialogVisible = true
                console.log(props);
                inspectPlanList({id:props.projectId}).then((res:any)=>{
                    data.obj=res
                })
            },
            //获取自定义表单
            getData() {
                formGet({ tag: 'fzBgjcpl' }).then((res: any) => {
                    data.name = res.name
                    data.id = res.id
                    data.isReset=res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item:any)=>{
                        data.model.data[item.prop]=''
                    })
                    data.fields2 = formStruct.formFields
                    data.fields2.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                       if(localData.data){
                        for (let key in data.model.data) {
                            if(localData.data[key]!=null){
                                data.model.data[key] = localData.data[key]
                            }
                        }
                        data.model.data.data=localData.data.data||[]
                       }
                    } 

                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
            },
            handleClose() {
                data.dialogVisible = false
                data.values = copy(values)
            },
            query() {
                form1.value.verification().then(() => {
                        if(data.values.after==data.obj.before){
                          return  Message({ type: 'error', message: '变更频率不能重复' })
                        }

                    data.model.data.data.push({
                        period: data.obj.period,
                        before: data.obj.before,
                        after: data.values.after,
                        uploadName: JSON.parse(<string>localStorage.getItem('userVO')).name,
                        uploadTime: momentNewDate(),
                        remark: data.values.remark,
                        isOwn: true
                    })
                    methods.handleClose()
                    data.disabled = true
                })
            },
            //删除文件
            deleteOut(index: number) {
                ElMessageBox.confirm(
                    '是否删除当前变更频率?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error',
                    }
                )
                    .then(() => {
                        data.model.data.data.splice(index, 1)
                        data.disabled = false
                    })
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                data.model.changeFrequency = {}
                data.model.data.data = data.model.data.filter((item: any) => {
                    return !item.isOwn
                })
            },
            resultData() {
                return new Promise((resolve, reject) => {
                    let arr = data.model.data.data.filter((item: any) => {
                        return item.isOwn
                    })
                    if (arr.length > 0) {
                        data.model.changeFrequency = arr[0]
                    }
                    resolve(data.model)
                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }
        return {
            ...toRefs(data),
            ...methods, form1
        }
    }
})
</script>
<style lang='scss'>
.fzBgjcpl_form {
    .el-form-item {
        width: 100% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: 100% !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }
    }
}
</style>